<style>
    #user-update {
        padding: 20px 25px 25px 0;
    }

    #user-update .layui-treeSelect .ztree li a, .ztree li span {
        margin: 0 0 2px 3px !important;
    }

    #user-update #data-permission-tree-block {
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 3px 0;
    }

    #user-update .layui-treeSelect .ztree li span.button.switch {
        top: 1px;
        left: 3px;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="user-update">
    <form class="layui-form" action="" lay-filter="user-update-form">
        <div class="layui-form-item website-hide">
            <label class="layui-form-label website-form-item-require">用户id：</label>
            <div class="layui-input-block">
                <input type="text" name="userId" data-th-value="${user.userId}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label website-form-item-require">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="username" minlength="2" maxlength="11" data-th-id="${user.userId}"
                       lay-verify="range|username" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机：</label>
            <div class="layui-input-block">
                <input type="tel" name="mobile" lay-verify="phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label website-form-item-require">邮箱：</label>
            <div class="layui-input-block">
                <input type="text" name="email" lay-verify="email" maxlength="50" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label website-form-item-require">角色：</label>
            <div class="layui-input-block">
                <!--<select name="roleId"
                        lay-verify="required"
                        xm-select-direction="down"
                        xm-select="user-update-role"
                        xm-select-skin="default">
                </select>
                -->
                <div th:if="${!role.isSystem}">
                    <select name="roleId">
                        <option value="">请选择</option>
                        <option
                                th:each="item : ${roles}"
                                th:selected="${ item.roleId eq role.roleId}"
                                th:value="${item.roleId}" th:text="${item.roleName}">
                        </option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux" th:if="${role.isSystem}" th:text="${role.roleName}"></div>

            </div>
        </div>
        <!-- <div class="layui-form-item">
             <label class="layui-form-label">部门：</label>
             <div class="layui-input-block">
                 <input type="text" name="deptId" id="user-update-dept" lay-filter="user-update-dept"
                        class="layui-input">
             </div>
         </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label website-form-item-require">状态：</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="有效">
                <input type="radio" name="status" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label website-form-item-require">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男性">
                <input type="radio" name="sex" value="1" title="女性">
                <input type="radio" name="sex" value="2" title="保密">
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">数据权限：</label>
            <div class="layui-input-block" id="data-permission-tree-block">
                <div class="data-permission-tree" lay-filter="dataPermissionTree" style="margin-left: 1rem"></div>
            </div>
        </div>-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="description" maxlength="100" class="layui-textarea">
                </textarea>
            </div>
        </div>
        <div class="layui-form-item website-hide">
            <button class="layui-btn" lay-submit="" lay-filter="user-update-form-submit" id="submit"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['website', 'form', 'formSelects', 'validate', 'treeSelect', 'eleTree'], function () {
        var $ = layui.$,
            website = layui.website,
            layer = layui.layer,
            formSelects = layui.formSelects,
            treeSelect = layui.treeSelect,
            form = layui.form,
            eleTree = layui.eleTree,
            user = [[${user}]],
            role = [[${role}]],
            $view = $('#user-update'),
            validate = layui.validate,
            _deptTree;

        form.verify(validate);
        form.render();
        initUserValue();
        // renderDeptTree();
        formSelects.render();
        // function renderDeptTree() {
        //     _deptTree = eleTree.render({
        //         elem: $view.find('.data-permission-tree'),
        //         url: ctx + 'dept/tree',
        //         accordion: true,
        //         highlightCurrent: true,
        //         showCheckbox: true,
        //         checkStrictly: true,
        //         renderAfterExpand: false,
        //         request: {
        //             name: 'name',
        //             key: "id",
        //             checked: "checked",
        //             data: 'data'
        //         },
        //         response: {
        //             statusName: "code",
        //             statusCode: 200,
        //             dataName: "data"
        //         },
        //         done: function (r) {
        //             _deptTree.setChecked(user.deptIds.split(","), true);
        //         }
        //     });
        //     return _deptTree;
        // }

        /* treeSelect.render({
             elem: $view.find('#user-update-dept'),
             type: 'get',
             data: ctx + 'dept/select/tree',
             placeholder: '请选择',
             search: false,
             success: function () {
                 treeSelect.checkNode('user-update-dept', user.deptId);
             }
         });*/

        /* formSelects.config('user-update-role', {
             searchUrl: ctx + 'role',
             response: {
                 statusCode: 200
             },
             beforeSuccess: function (id, url, searchVal, result) {
                 var data = result.data;
                 var tranData = [];
                 for (var i = 0; i < data.length; i++) {
                     tranData.push({
                         name: data[i].roleName,
                         value: data[i].roleId
                     })
                 }
                 result.data = tranData;
                 return result;
             },
             success: function () {
                 formSelects.value('user-update-role', user.roleId.split(','));
             },
             error: function (id, url, searchVal, err) {
                 console.error(err);
                 website.alert.error('获取角色列表失败');
             }
         });*/

        function initUserValue() {
            form.val("user-update-form", {
                "username": user.username,
                "mobile": user.mobile,
                "email": user.email,
                "status": user.status,
                "sex": user.sex,
                "description": user.description
            });
        }

        form.on('submit(user-update-form-submit)', function (data) {
            /*var checked = _deptTree.getChecked(false, true);
            var deptIds = [];
            layui.each(checked, function (key, item) {
                deptIds.push(item.id)
            });
            data.field.deptIds = deptIds.join(",");*/
            if (website.nativeEqual(data.field, user)) {
                website.alert.warn('数据未作任何修改！');
                return false;
            }
            var roleSystem = role.isSystem;
            if (!roleSystem && !data.field.roleId) {
                website.alert.error('请选择角色！');
                return false;
            }else if(roleSystem){
                data.field.roleId=role.roleId;
            }

            website.post(ctx + 'user/update', data.field, function () {
                layer.closeAll();
                website.alert.success(user.username + ' 用户数据修改成功');
                $('#website-user').find('#query').click();
            });
            return false;
        });
    });
</script>